 

<template>
	<view class="content" styl="margin:50px;">
	<live-player
	
	  :src="currentUrl"
	  autoplay 
	    @statechange="statechange"
	    @error="error"
	  style="width: 300px; height: 225px;"
	/>

	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				isPlaySource: false, //是否有播放源
				isVideoLive: false, //是否是直播
				isAutoplay: true, //是否自动播放
				videoMsg: '', //video消息
				currentUrl: 'wss://video4.vzicloud.com/stream.flv?target=ovp3ykR7m8qzPqwOlBax8VStT2CiXGY3_BWtwdlrUr5ASsHG9usAWE56s3JVQF_3zqnG4glJn7jYhYsOHUNLTwBZhsZU1l4Zn_ZusD1kEsuXWtdC5FaqU7wvgjCgPXbZHb-SW4c10jvngvJ4O6Et8A&token=TdSmSz9U9ByEEWTvSqaQ1x3bLwNnifFTDJd8c7GAzNARN1lyHNigJXZ6IlTQ7ZZkqKnwRe%2BGLxolQjVMRQ%2ByUNyxd%2FZVwx74A78mkCwuwUW63xkpH59NUd%2Badf2fRM6UCeRjtLVRAvm0jCqSnzIIjaAF7szJGOQxFb7MEP6ZtGk%3D', //播放路径
				showControlbar: true,
				timer:null,
			}
		},
	 
		onLoad(){
			this.videoContext = wx.createLivePlayerContext('video-livePlayer');
					that.videoContext.play();
		},
		methods: {     statechange(e){
            console.log('live-player code:', e.detail.code)
        },
        error(e){
            console.error('live-player error:', e.detail.errMsg)
        }}
	}
</script>
 
 
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.player-content {
			position: relative;
			width: 100%;
			height: 450rpx;
			display: flex;
			background-size: 100% 100%;
 
			.live-player {
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
	}
	//播放器弹出工具
	.player-tool {
		width: 100%;
		height: 60rpx;
		background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 0;
		padding: 0 45rpx;
		transition: all 0.3s;
		.tools {
			height: 100%;
			width: auto;
			display: flex;
			align-items: center;
 
			.full-screen {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
 
				.iconfont {
					color: #fff;
					font-weight: bold;
 
				}
			}
 
			.cruise {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 25rpx;
 
				.iconfont {
					color: #E45A3E;
					font-size: 45rpx;
				}
			}
		}
 
	}
</style>
 